<template>
  <div class="container" >
    <div class="login">
      <div class="cell-list">
        <i-input v-model="name" title="账号" @change='bindName' autofocus placeholder="请输入账号" />
        <i-input v-model="password" title="密码" @change='bindPassword' type="password" placeholder="请输入密码" />
      </div>
      <i-button @click="handleClick" type="primary">登录</i-button>
    </div>
  </div>
</template>

<script>
import { loginByUsername, loginByOpenId, getOpenId } from 'api/api'
export default {
    data () {
        return {
            name: '',
            password: '',
            openId: ''
        }
    },
    methods: {
        handleClick () {
            if (!this.name) {
                wx.showToast({
                    title: '请输入账号',
                    icon: 'none',
                    mask: true,
                    duration: 1000
                })
                return
            }
            if (!this.password) {
                wx.showToast({
                    title: '请输入密码',
                    icon: 'none',
                    mask: true,
                    duration: 1000
                })
                return
            }
            loginByUsername(this.name, this.password, this.openId)
                .then((res) => {
                    console.log(res)
                    if (res.state === 'success') {
                        wx.setStorageSync('token', res.data)
                        const url = '../claim/index'
                        wx.switchTab({ url })
                    } else {
                        wx.showToast({
                            title: res.message,
                            icon: 'none',
                            mask: true,
                            duration: 1000
                        })
                    }
                })
                .catch((err) => {
                    console.log(err)
                })
        },
        _loginByOpenId () {
            loginByOpenId(this.openId)
                .then((res) => {
                    console.log(res)
                    if (res.state === 'success') {
                        wx.setStorageSync('token', res.data)
                        const url = '../claim/index'
                        wx.switchTab({ url })
                    } else {
                        wx.showToast({
                            title: res.message,
                            icon: 'none',
                            mask: true,
                            duration: 1000
                        })
                    }
                })
        },
        async _getOpenId (code) {
            await getOpenId(code)
                .then((res) => {
                    if (res.state === 'success') {
                        wx.setStorageSync('openid', res.data.openid)
                        return res.data.openid
                    }
                })
        },
        bindName (e) {
            this.name = e.mp.detail.detail.value
        },
        bindPassword (e) {
            this.password = e.mp.detail.detail.value
        },
        getJsCode () {
      // 调用登录接口
            wx.login({
                success: (res) => {
                    this._getOpenId(res.code)
                }
            })
        }
    },
    async mounted () {
        this.openId = wx.getStorageSync('openid')
        let token = wx.getStorageSync('token')
        if (!this.openId && token) {
            await this.getJsCode()
            this.openId = await this._getOpenId()
        }
        if (this.$root.$mp.query.type !== 'quit') {
            this._loginByOpenId()
        }
    }
}
</script>

<style lang='stylus'>
.login
    .header
        width 750rpx
        height 305rpx
        position relative
        .header-bg
            position absolute
            top: 0
            bottom 0
            left: 0
            width 750rpx
            height 302rpx
        .content
            position absolute
            top 0
            display: flex
            padding 85rpx 0 0 50rpx
            box-sizing border-box
            .wux-cell__thumb
                width 28rpx
            .userinfo-avatar
                width: 110rpx
                height: 110rpx
                border-radius: 50%
                border 3rpx solid #fff
                margin-right 22rpx
            .userinfo
                font-size 23rpx
                color: #fff
                .name
                    font-size 32rpx
                    margin-bottom 12rpx
                p
                    line-height 32rpx
                    span
                        margin-right 18rpx

.cell-list
  box-sizing border-box
  width 750rpx
  padding 0 30rpx 0 10rpx
  background #fff


</style>
